<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="Data Formulator"
      content="Concept-driven Visualization Authoring"
    />
    
    <!-- Preload critical images for faster initial load -->
    <link rel="preload" as="image" href="/gas_prices-thumbnail.webp" type="image/webp" />
    <link rel="preload" as="image" href="/global_energy-thumbnail.webp" type="image/webp" />
    <link rel="preload" as="image" href="/movies-thumbnail.webp" type="image/webp" />
    <link rel="preload" as="image" href="/unemployment-thumbnail.webp" type="image/webp" />
    
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Data Formulator</title>
  </head>
  <body>
    <noscript>Run this app with javascript</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>
